<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/MUI/css/mui.picker.min.css">
<script src="${pageContext.request.contextPath}/resources/MUI/js/mui.picker.min.js"></script>
</head>
<style>
.btn {
	line-height: 40px;
}
</style>

<body>
	<form class="mui-input-group mui-collapse-content">
		<div class="mui-input-row">
			<label>开始时间:</label> <input id='begin' data-options='{}' class="btn"
				placeholder="开始时间">
		</div>
		<div class="mui-input-row">
			<label>结束时间:</label> <input id='end' data-options='{}' class="btn"
				placeholder="到期时间">
		</div>
		<div class="mui-button-row">
			<a class="mui-btn mui-btn-primary submit">提交</a>
		</div>
	</form>
	<div id="leg_table"></div>
	<script type="text/html" id="Bar">
			<a class="mui-btn mui-btn-primary edit">编辑</a>
		</script>
	<script type="text/javascript">
        	mui('#offCanvasContentScroll').scroll().scrollTo(0,0);
			
        	$(".mui-title").html("柜子使用时间记录");

        	//接收数据
			var stateList = $.legTable({
				limit: 10,			//默认10
				page:1,				//默认1
				id:"#leg_table",	//绑定id
				url:"/caseUseTime/list",
				cols:[
					{field: 'caseNo', title: 'ID'},
		            {field: 'latitude', title: '纬度'},
		            {field: 'longitude', title: '经度'},
		            {field: 'des', title: '描述'},
		            {field: 'useTime', title: '使用到期时间'},
		            {title: '操作',templet:'#Bar'}
		        ]
			});
			
			//时间
			var btns = $('.btn');
			var begin = "",end = "";
			btns.each(function(i, btn) {
				btn.addEventListener('tap', function() {
					var _self = this;
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						_self.picker = new mui.DtPicker(options);
						_self.picker.show(function(rs) {
							if(id == "begin"){
								begin = rs.text;
							}else if(id == "end"){
								end = rs.text;
							}
							$("#"+id).val(rs.text);
							_self.picker.dispose();
							_self.picker = null;
						});
					
				}, false);
			});

			$(".submit").on("touchstart",function(){
           		stateList = $.legTable({
		        	where:{
		        		startTime:begin,
		        		endTime:end,
	        		}
	        	});
			})
			
			//编辑
			$("#leg_table").on("touchstart", ".table-list .edit", function(e){
				let i = $(this).parent('data').attr("value");
				window.location.hash = "/caseUseTime/edit";
				sessionStorage.setItem("url",url)
				sessionStorage.setItem("useTime",JSON.stringify($.data(i)))
		    })
			
		</script>
</body>

</html>